<template>
  <div class="dashboard-container">
    <!-- <sidebar class="sidebar-container" /> -->
    <!-- <NavMenu class="sidebar-container" /> -->

    <div class="box-line">
      <div v-for="(item, index) in line1" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

    <div class="box-line">
      <div v-for="(item, index) in line3" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>
    <div class="box-line">
      <div v-for="(item, index) in line2" :key="index" class="box">
        <th>{{ item.title }}</th>
        <div class="line" />
        <td v-for="(i, n) in item.text" :key="n">
          <router-link :to="i.link">{{ i.title }}</router-link>
        </td>
      </div>
    </div>

  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
// import { Sidebar } from '@/layout/components/index'
// import Sidebar from '@/layout/components/Sidebar/index.vue'
import NavMenu from '@/components/NavMenu.vue'

export default {
  name: 'Dashboard',
  components: {
    // Sidebar,
    NavMenu
  },
  // computed: {
  //   ...mapGetters(["name"]),
  // },
  data() {
    return {
      line1: [
        // {
        //   title: '下载中心',
        //   text: [
        //     { title: '总部下载', link: '/DownloadHQ' }
        //   ]
        // },
        {
          title: '实时监控',
          text: [
            { title: '时效考核', link: '/Assess' }

          ]
        }
      ],
      line2: [
        {
          title: '扫描轨迹',
          text: [
            { title: '信息指数考核', link: '/Information' }
          ]
        }
      ],
      line3: [
        {
          title: '虚假签收',
          text: [
            { title: '虚假签收投诉', link: '/Complaints' },
            { title: '网点通知达标统计', link: '/Standards' }
          ]
          // text: ["派费结算", "进港派费结算",'派费直达管理'],
        }
        // {
        //   title: '发票管理',
        //   text: [
        //     { title: '网点开票申请', link: '/Outlet' },
        //     { title: '发票账单-网点', link: '/InvoiceBill1' },
        //     { title: '已开发票查询', link: '/InvoiceQuery1' }
        //   ]
        //   // text: ["奖罚分摊结算", "考核分摊结算"],
        // }
      ],
      line4: [
        {
          title: '中转结算报表',
          text: [
            { title: '中转费报表', link: '/TransitCharge' },
            { title: '中转运单明细查询', link: '/TransferWaybill' },
            { title: '包干结算报表', link: '/ResponsibleFor' },
            { title: '中转考核结算报表', link: '/TransferAssessment' },
            { title: '新出港操作费报表', link: '/NewOutbound' },
            { title: '集包费报表', link: '/PackageCharge' },
            { title: '操作装卸费报表', link: '/HandlingCharge' },
            { title: '中转计泡报表', link: '/TransferBubble' },
            { title: '中转差重报表', link: '/TransferDifference' },
            { title: '进港操作费报表', link: '/PortHandling' },
            { title: '退件操作费报表', link: '/ReturnOperating' },
            { title: '退件中转费报表', link: '/ReturnTransfer' },
            { title: '异性件结算报表', link: '/HeterosexualParts' },
            { title: '其他费用报表', link: '/OtherExpense' }

          ]
          // text: ["站点预付款", "总部预付款",'站点预付款'],
        }
      ],
      line5: [
        {
          title: '政策结算报表',
          text: [
            { title: '新面单返利报表', link: '/humanEffect' }
          ]
          // text: ["人效统计分析", "客户经营"],
        }
      ]
      // line6: [
      //   {
      //     title: '数据对比',
      //     text: [
      //       { title: '重量差异报表', link: '/weight' },
      //       { title: '包重差异报表', link: '/packageWeight' }
      //     ]
      //     // text: ["重量差异报表", "包重差异报表"],
      //   },
      //   {
      //     title: '对账中心',
      //     text: [
      //       { title: '承/业对账中心', link: '/ReconciliationCenter' }
      //     ]
      //     // text: ["承/业对账中心"],
      //   }
      // ]
    }
  },
  methods: {
  }
}
</script>

<style
  lang="scss"
  scoped
>
.dashboard-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: 210px;
  height: 100vh;
}

.box {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-flow: column;
  margin: 30px 0px 40px 40px;

  th {
    font-size: 20pt;
    font-weight: normal;
    color: #333;
  }

  td {
    margin: 10px 0 10px 0;
    color: #666;
    font-size: 18px;
  }
}

.line {
  height: 1px;
  color: #9999;
  background: #9999;
  width: 216px;
  margin: 10px 0px 10px 0;
  margin-left: 20px;
}
</style>
